<script setup>
import Mask from "./mask.vue";
const props = defineProps(["msg"]);
const emit = defineEmits(["ok"]);
</script>
<template>
  <Mask>
    <div class="dialog">
      <h2 class="msg">{{ props.msg }}</h2>
      <div class="btn">
        <button @click="$emit('hide')" class="cancel">取消</button>
        <button
          @click="
            () => {
              $emit('ok');
              $emit('hide');
            }
          "
          class="ok"
        >
          确认
        </button>
      </div>
    </div>
  </Mask>
</template>

<style scoped>
.dialog {
  width: 700rem;
  height: 400rem;
  background-color: #fff;
  border-radius: 50rem;
  position: absolute;
  top: 0;
  bottom: 300rem;
  left: 0;
  right: 0;
  margin: auto;
}
.msg {
  height: 280rem;
  text-align: center;
  line-height: 280rem;
  font-size: 45rem;
}
.btn {
  display: flex;
  justify-content: space-around;
}
.cancel,
.ok {
  width: 300rem;
  height: 80rem;
  border-radius: 40rem;
  font-size: 40rem;
  background-color: #fff;
  border: 1rem black solid;
}
.ok {
  background-color: rgb(250, 188, 0);
  border: none;
}
</style>
